<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title></title>
<style type="text/css">
<!--
body,td,th {
	font-size: 12px;
}
.red{
  color: red;
}
.green{
  color: green;
}
-->
</style>
<script type="text/javascript">
function checkinput(){
	var user=form.user.value;//获取用户名文本框的值
	var checkuser=/^[a-zA-Z]\w{4,15}$/;			//定义正则表达式
	if(checkuser.test(user)){//用正则表达式进行判断
		userbox.innerHTML="<span class='green'>用户名符合要求</span>";
	}else{
		userbox.innerHTML="<span class='red'>*必须是以字母开头，可包含字母、数字或下划线，长度5-16个字节</span>";
	}
	var pwd=form.pwd.value;//获取密码文本框的值
	var checkpwd=/^[a-zA-Z0-9]{6,12}$/;			//定义正则表达式
	if(checkpwd.test(pwd)){//用正则表达式进行判断
		pwdbox.innerHTML="<span class='green'>密码符合要求</span>";
	}else{
		pwdbox.innerHTML="<span class='red'>*可包含字母、数字，长度6-12个字节</span>";
	}
}

</script>
</head>
<body>
<form name="form" method="post" action="#">
用户名：<input type="text" name="user" id="user">
  <span id="userbox" class="red">*必须是以字母开头，可包含字母、数字或下划线，长度5-16个字节</span><br>
密&emsp;码：<input type="password" name="pwd" id="pwd">
  <span id="pwdbox" class="red">*可包含字母、数字，长度6-12个字节</span><br>
<input type="button" name="but" value="测试" onclick="checkinput()">
</form>
</body>
</html>
